<template>
  <div>
    生命周期
    
    <div ref="doms">{{ isBefore }}</div>
    <!-- keep-alive  缓存，前端缓存 ，可以缓存一些已经操作过的一些组件 ：
     应用场景： 比如分步骤填写信息，可能会用到。
     有两个钩子函数（分步骤： 四个组件，点击上一个，不会重新进行加载）
     操作数据都是在一下两个声明周期中进行操作
     created -mouneted -activated
     deactivated
     activated 合适缓存组件以及数据
     deactivated ：清空一些缓存组件以及数据
    -->


    <!-- 
      生命周期：10，keep-alive 有2个  activated 和deactivated ***
      其余8个有 beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed。
      一般我常用 4 个 created，mounted，updated，beforeDestroy
     -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      isBefore: "1234",
      num:1000,
      timer: null
    }
  },
  // 他是一个函数
  beforeCreate() {
    console.log(this,15)
  },
  // 已经可以做代理和数据劫持
  // 进入页面即可以进行调用方法
  created() {
    console.log(this.isBefore,18)
  },
  // dom 还没有解析完毕
  beforeMount() {
    console.log(this.isBefore,23)
    console.log(this.num)
    
  },
  // 进入页面 dom 元素已经加载解析完成、
  // 1，可以调用接口
  // 2，初始化数据 。
  // 3，可以调用方法和数据
  // 可以监听一些dom方法
  // dom已经渲染完成之后在进行加载
  mounted() {
    console.log(this.isBefore,33);
    this.isBefore = "这是一个值";
    this.timer = setInterval(()=> {
      this.num --
      console.log(this.num)
    },3000)
  },
  // 不能在beforeUpdate 当中改变这个值，数据更新了，但是页面没有更新
  beforeUpdate() {
    console.log(this.isBefore,38)
    console.log(this.$refs)
    // 数据不更新
    // this.isBefore = false;
    // console.log(this.isBefore,38)
  },
  // 不能在update 当中改变这个值，页面与数据保持同步
  updated() {
    console.log(this.isBefore,44)
  },
  // 销毁 // 比如使用了setTimeout 或者setInterval 或者 addListener（监听事件）一定要有对应的清除操作
  // 可以作为项目的一个优化项  ** 
  // beforeDestroy 关闭定时器还有 removeListener
  beforeDestroy() {
    console.log('是否执行了')
    clearInterval(this.timer)
  },
  destroyed() {
    // 销毁
  },
}
</script>